<template>
  <div class="p-4">
    <BasicTable @register="registerTable">
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            stopButtonPropagation
            :actions="[
              {
                label: '听课记录小组评价',
                icon: 'ic:outline-credit-score',
                onClick: handleLectureNoteDesc.bind(null, record),
              },
              {
                label: '实习教案小组评价',
                icon: 'ic:outline-credit-score',
                onClick: handleLessonPlanDesc.bind(null, record),
              },
              {
                label: '教研活动小组评价',
                icon: 'ic:outline-credit-score',
                onClick: handleTeachingStudyDesc.bind(null, record),
              },
            ]"
            :dropDownActions="[
              {
                label: '班主任实习小组评价',
                icon: 'ic:outline-credit-score',
                onClick: handleLeaderWorkDesc.bind(null, record),
              },
              {
                label: '教育实习总结小组评语',
                icon: 'ic:outline-credit-score',
                onClick: handleRemarkEdit.bind(null, record),
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <RemarkModal @register="registerEditModal" />
  </div>
</template>

<script lang="ts" setup>
  import { BasicTable, TableAction, useTable } from "/@/components/Table";
  import { useRouter } from "vue-router";
  import { useModal } from "/@/components/Modal";
  import RemarkModal from "./Edit.vue";
  import { defaultActionColumn, defaultTableSettings } from "/@/hooks/core/useDefault";
  import { getUserListByCaptainApi } from "/@/api/core/group";
  import { getGroupScoreApi } from "/@/api/core/internInfo";
  import { studentBasicColumns } from "/@/views/default/data";

  const [registerTable] = useTable({
    title: "小组成员",
    api: getUserListByCaptainApi,
    columns: studentBasicColumns,
    ...defaultTableSettings,
    actionColumn: {
      width: 520,
      ...defaultActionColumn,
    },
    rowKey: "userId",
  });

  const [registerEditModal, { openModal: openEditModal }] = useModal();

  async function handleRemarkEdit(record) {
    const score = await getGroupScoreApi(record.userId);
    openEditModal(true, { score, userId: record.userId });
  }

  const router = useRouter();

  function handleLectureNoteDesc(record) {
    router.push({
      name: "LectureNoteList",
      query: { userId: record.userId, userName: record.userName },
    });
  }

  function handleLessonPlanDesc(record) {
    router.push({
      name: "LessonPlanList",
      query: { userId: record.userId, userName: record.userName },
    });
  }

  function handleTeachingStudyDesc(record) {
    router.push({
      name: "TeachingStudyList",
      query: { userId: record.userId, userName: record.userName },
    });
  }

  function handleLeaderWorkDesc(record) {
    router.push({
      name: "LeaderWorkDesc",
      query: { userId: record.userId },
    });
  }
</script>
